<template>
  <CommonDialog :dialogShow.sync="dialogShow" :title="curRow?.id ? '编辑球员' : '新增球员'" @makeSure="makeSure">
    <template #content>
      <el-form :model="playerForm" ref="form" label-width="90px" :rules="rules" class="playerForm">
        <el-form-item label="姓名：" prop="name">
          <common-input v-model="playerForm.name" placeholder="请输入姓名"></common-input>
        </el-form-item>
        <el-form-item label="年龄：" prop="age">
          <common-input v-model="playerForm.age" placeholder="请输入年龄"></common-input>
        </el-form-item>
        <el-form-item label="身高：" prop="height">
          <common-input v-model="playerForm.height" placeholder="请输入身高"></common-input>
        </el-form-item>
        <el-form-item label="体重：" prop="weight">
          <common-input v-model="playerForm.weight" placeholder="请输入体重"></common-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="contactInfo">
          <common-input v-model="playerForm.contactInfo" placeholder="请输入手机号"></common-input>
        </el-form-item>
        <el-form-item label="班级：" prop="classDesc">
          <common-input v-model="playerForm.classDesc" placeholder="请输入班级"></common-input>
        </el-form-item>
        <el-form-item label="年级：" prop="grade">
          <common-select v-model="playerForm.grade" :options="levelOptions" placeholder="请选择年级"></common-select>
        </el-form-item>
      </el-form>
    </template>
  </CommonDialog>
</template>

<script>
export default {
  props: {
    changeDialog: {
      typeof: Boolean,
      default: false,
    },
    curRow: {
      typeof: Object,
      default: () => {
        return {
          id: "",
        };
      },
    },
  },
  created() {
    const keys = Object.keys(this.curRow);
    console.log(keys);
    keys.forEach((key) => {
      this.playerForm[key] = this.curRow[key];
    });
    console.log(this.playerForm);
  },
  data() {
    return {
      playerForm: {
        name: "",
        age: "",
        height: "",
        weight: "",
        contactInfo: "",
        classDesc: "",
        grade: "",
      },
      levelOptions: [
      {
          label: "大一",
          value: "大一",
        },
        {
          label: "大二",
          value: "大二",
        },
        {
          label: "大三",
          value: "大三",
        },
        {
          label: "大四",
          value: "大四",
        },
      ],
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: 'blur' },
        ],
        age: [
          { required: true, message: "请输入年龄", trigger: 'change' },
        ],
        height: [
          { required: true, message: "请输入身高", trigger: 'change' },
        ],
        contactInfo: [
          { required: true, message: "请输入联系方式", trigger: 'change' },
        ],
      },
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.changeDialog;
      },
      set(v) {
        this.$emit("update:changeDialog", v);
      },
    },
  },
  mounted() { },

  methods: {
    makeSure() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.playerForm);
          this.$emit("changePlayer", this.playerForm);
        } else {
          return false;
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
.playerForm {
  color: red;

  ::v-deep {
    .el-form-item__label {
      color: #333;
      font-size: 16px;
      font-weight: medium;
    }

    .el-input {
      width: 380px !important;
    }
  }
}
</style>
